<template>
  <div class="student">
    <!-- 搜索区域 -->
    <div class="header">
      <el-input
        @change="searchInput"
        v-model="input"
        placeholder="请输入内容"
      ></el-input>
      <el-button type="success">查询</el-button>
      <!-- <el-button type="success"> -->
      <!-- <router-link to="add-stu" style="color: #fff">页面添加</router-link> -->
      <!-- </el-button> -->
      <el-button type="success"  @click="addstuinfo">添加</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="wrapper">
      <el-table :data="tableData" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="stuid"
          label="学生学号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="stuname"
          label="学生姓名"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="stusex"
          label="学生性别"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="stuclass"
          label="学生班级"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="stufactory"
          label="学生所属系"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="stuphone"
          label="学生联系方式"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

      <div style="text-align:center;margin:20px">
      <el-pagination background layout="total, pager, next,jumper" :total="total" :page-size="PageSize" @current-change="changePage"></el-pagination>
  </div>
     <!-- <MyPagination
      :total="total"
      :Pagesize="PageSize"
      @changePage="changePage"
    /> -->
    <!-- 弹框组件 -->
    <!-- <ClassDialog :dialogVisible='dialogVisible'  @changeDialog="changeDialog"/> -->
    <StudentDialog ref="dialog" :title="title"  :rowData="rowData"/>
  </div>
</template>

<script>
import MyPagination from "../../components/MyPagination.vue";
import StudentDialog from "./StudentDialog.vue";
export default {
  components: {
    MyPagination,
    StudentDialog,
},
  data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      PageSize: 1,
      type: 1,
      list: [],
      dialogVisible: false,
      title:'添加学生',
      rowData:{},//当前行的对象
    };
  },
methods: {
    // 添加商品
    addstuinfo() {
      // this.dialogVisible = true
      this.$refs.dialog.dialogVisible = true;
      this.title = "添加学生";
    },
    //分页页码
    changeDialog() {
      this.dialogVisible = false;
    },
    changePage(num) {
      if (this.type == 1) {
        this.http(num);
      } else {
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
    //搜索查询数据
    searchInput(val) {
      if (!val) {
        this.http(1);
        return;
      }
      this.$api
        .studentSearch({
          search: val,
        })
        .then((res) => {
          console.log("搜索---", res.data);
          if (res.data.status == 200) {
            this.list = res.data.result;
            //假设搜索结果需要分页（搜索出多个结果）
            this.total = res.data.result.length;
            this.paseSize = 3;
            this.tableData = res.data.result.slice(0, 3); //搜索获取的数据条数--要对搜索结果进行分割
            this.type = 2;
          } else {
            this.tableData = [];
            this.total = 1;
            this.pageSize = 1;
            this.type = 1;
          }
        });
    },
    handleEdit(index,row) { //编辑课程数据
        this.$refs.dialog.dialogVisible = true;
        this.title= "编辑课程";
        // this.rowData = row;
        this.$refs.dialog.studentForm = row;
    }, 
    handleDelete(index, row) {   //删除课程数据
      console.log("删除", index, row);
      this.$confirm("此操作将永久删除该学生信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //请求接口
          this.$api.deletestuinfo({
            id:row.id
          })
          .then(res=>{
            console.log("删除",res.data)
            if(res.data.status == 200){
              this.$message({
                type:'success',
                message:'删除成功!',
              });
              
              this.http(1);
            }
          });
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //课程列表的获取
    http(page) {
      this.$api
        .getStudentList({
          page,
        })
        .then((res) => {
          console.log(res.data);
          if ((res.data.status = 200)) {
            this.tableData = res.data.data; //数据列表
            this.total = res.data.total;
            this.PageSize = res.data.pageSize;
          }
        });
    },
  },
  //生命周期函数
  created() {
    this.http(1);
  },
    //课程列表的获取
  // http(page) {
  //     this.$api
  //       .getStudentList({
  //         page,
  //       })
  //       .then((res) => {
  //         console.log(res.data);
  //         if ((res.data.status = 200)) {
  //           this.tableData = res.data.data; //数据列表
  //           // this.total = res.data.total;
  //           // this.PageSize = res.data.pageSize;
  //         }
  //       });
  //   },
  // created() {
  //   this.$api.getStudentList({
  //     page:1
  //   })
  //   .then(res=>{
  //     console.log(res.data);
  //     if(res.data.status==200){
  //       this.tableData = res.data.data;
  //     }
  //   })
  // },

};
</script>

<style lang="less" scoped>
.student {
  margin: 20px;
}
.header {
  display: flex;

  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px 0;
}
</style>